<!--2-07封闭差动（同齿圈输出）传动比分配-->
<template>
  <div class="all" style="width: 100%;height: 100%;">
    <a-row class="all-row" style="height:100%;width: 100%">
      <a-col span="24" class="all-col" style="height: 100%">
        <div class="top">
          <div class="top-left">
            <div class="top-left-top">
              <div class="top-left-top-left">
                <div class="top-left-top-left-top">输入参数</div>
                <div class="top-left-btn-left-btm">
                  <div class="top-left-btn-left-btm-left">
                    <div class="top-left-btn-all">
                      <div class="top-left-btn-text">
                        <ul>
                          <li>总传动比</li>
                          <li>差动级最大宽径比上限值</li>
                          <li>封闭级最大宽径比上限值</li>
                        </ul>
                      </div>
                      <div class="top-left-btn-input">
                        <ul>
                          <li><input v-model="params_59.R0" /></li>
                          <li><input v-model="params_59.B1min" /></li>
                          <li><input v-model="params_59.B2min" /></li>
                        </ul>
                      </div>
                    </div>

                    <div class="top-left-btn-left2">
                      <input
                        v-model="params_59.ratio_D2_D1_min"
                        class="left-text"
                        style="text-align: center"
                      />
                      <img :src="mid" class="img" />
                      <input
                        v-model="params_59.ratio_D2_D1_max"
                        class="right-text"
                        style="text-align: center"
                      />
                    </div>
                  </div>
                  <div class="top-left-btn-right">
                    <div class="top-left-btn-right-top">
                      <div class="top-left-btn-right-top1">不均载数据</div>
                      <div class="top-left-btn-right-top2">齿数比限制值</div>
                      <div>
                        <a-button
                          class="top-left-btn-right-top3"
                          @click="showModal"
                          >!</a-button
                        >
                        <a-modal
                          title="齿数比限制值"
                          :visible="visible"
                          :confirm-loading="confirmLoading"
                          @ok="handleOk"
                          @cancel="handleCancel"
                        >
                          <img :src="jump" class="jump-img" />
                        </a-modal>
                      </div>
                    </div>

                    <div class="top-left-btn-right-btn">
                      <div class="top-left-btn-right-text">
                        <ul>
                          <li>6个行星轮</li>
                          <li>5个行星轮</li>
                          <li>4个行星轮</li>
                          <li>3个行星轮</li>
                        </ul>
                      </div>
                      <div class="text-1">
                        <ul>
                          <li><input v-model="params_59.bb1" /></li>
                          <li><input v-model="params_59.bb2" /></li>
                          <li><input v-model="params_59.bb3" /></li>
                          <li><input v-model="params_59.bb4" /></li>
                        </ul>
                      </div>
                      <div class="text-2">
                        <ul>
                          <li><input v-model="params_59.aa1" /></li>
                          <li><input v-model="params_59.aa2" /></li>
                          <li><input v-model="params_59.aa3" /></li>
                          <li><input v-model="params_59.aa4" /></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="top-left-top-right">
                <button class="button" @click="tclick">计算</button>
              </div>
            </div>
            <div class="top-left-btn">
              <div class="top-left-btn-top">以外径最小为目标函数</div>
              <div class="top-left-btn-btn" style="overflow-y: auto">
                <div>
                  <table class="table-1">
                    <tr>
                      <th>差动级行<br />星轮个数</th>
                      <th>封闭级行<br />星轮个数</th>
                      <th>差动级<br />齿数比</th>
                      <th>封闭级<br />齿数比</th>
                      <th>总体积<br />表征量</th>
                      <th>差动级齿圈<br />半径表征值</th>
                      <th>封闭级齿圈<br />半径表征值</th>
                      <th>差动级<br />齿宽径比</th>
                      <th>封闭级齿<br />圈宽径比</th>
                      <th>差动级实际<br />最大宽径比</th>
                      <th>封闭级实际<br />最大宽径比</th>
                      <th>封闭级与差<br />动级齿宽比</th>
                      <th>功率分流</th>
                    </tr>
                    <tr v-for="(item,index) in ans.rd_matrix" :key="index">
                      <td>{{ item[0] }}</td>
                      <td>{{ item[1] }}</td>
                      <td>{{ item[2] }}</td>
                      <td>{{ item[3] }}</td>
                      <td>{{ item[4] }}</td>
                      <td>{{ item[5] }}</td>
                      <td>{{ item[6] }}</td>
                      <td>{{ item[7] }}</td>
                      <td>{{ item[8] }}</td>
                      <td>{{ item[9] }}</td>
                      <td>{{ item[10] }}</td>
                      <td>{{ item[11] }}</td>
                      <td>{{ item[12] }}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="t-right">
            <img :src="picture1" class="picture-top" />
          </div>
        </div>
        <div class="btn">
          <div class="btn-left">
            <div class="btn-left-top">以体积最小为目标函数</div>
            <div class="btn-left-btn" style="overflow-y: auto">
                <table class="table-2">
                  <tr>
                    <th>差动级行星轮个数</th>
                    <th>封闭级行星轮个数</th>
                    <th>差动级齿数比</th>
                    <th>封闭级齿数比</th>
                    <th>总体积表征量</th>
                    <th>功率分流</th>
                  </tr>
                  <tr v-for="(item,index) in ans.rm_matrix" :key="index">
                    <td>{{ item[0] }}</td>
                    <td>{{ item[1] }}</td>
                    <td>{{ item[2] }}</td>
                    <td>{{ item[3] }}</td>
                    <td>{{ item[4] }}</td>
                    <td>{{ item[5] }}</td>
                  </tr>
                </table>
            </div>
          </div>
          <div class="btn-right">
            <img :src="picture2" class="picture-btn" />
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import picture1 from "@/assets/image/image_59-img.png";
import picture2 from "@/assets/image/image_59_new.png";
import mid from "@/assets/image/image_59_mid.png";
import jump from "@/assets/image/image_59_NGW.png";
import {nameOptiRatio} from "@/api/file";

export default {
  created () {
    document.title = '封闭差动（同齿圈输出）传动比分配' //模块中文名
    this.$store.state.file.key = 59 //设置key为自己的页面编号
  },
  name: "nameOptiRatio_2stageR_reduction_last",
  data() {
    return {
      params_59:this.$store.state.file.dataList[59],
      picture1,
      picture2,
      mid,
      jump,
      visible: false,
      confirmLoading: false,
      ans: {
        rm_matrix: [[]],
        rd_matrix:[[]],
      }
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    //点击ok
    // eslint-disable-next-line no-unused-vars
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 0);
    },
    //点击cancel
    // eslint-disable-next-line no-unused-vars
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    tclick() {
      nameOptiRatio(this.params_59)
        .then(res => {
          console.log(res);
          // if (res.code == 200) {
            this.ans = res;
          // }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
input {
  width: 80%;
  text-align: center;
}
.all {
  background-color: #ffffff;
}
.top {
  position: relative;
  height: 68%;
  width: 100%;
  margin-left: 10px;
}
.top-left {
  position: absolute;
  height: 100%;
  width: 70%;
  left: 0%;
}
.top-left-top {
  height: 50%;
  width: 100%;
  position: relative;
}
.top-left-top-left {
  position: absolute;
  height: 95%;
  width: 80%;
  left: 0;
  box-shadow: 2px 2px 5px rgb(213, 213, 213);
}
.top-left-top-left-top {
  height: 11%;
  width: 100%;
  background-color: #d7d7d7;
  font-size: 16px;
  font-family: Arial;
  font-style: normal;
}
.top-left-btn-left-btm {
  height: 89%;
  width: 100%;
  position: relative;
}
.top-left-btn-left-btm-left {
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
}
.top-left-btn-all {
  display: flex;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  width: 70%;
  height: 70%;
  position: relative;
}
.top-left-btn-text {
  position: absolute;
  left: 0%;
  width: 70%;
  height: 60%;
  margin-top: 2%;
}
.top-left-btn-text li {
  height: 35%;
  text-align: right;
}
.top-left-btn-input {
  width: 20%;
  height: 100%;
  position: absolute;
  right: 0%;
}
.top-left-btn-input li {
  height: 30%;
}
.top-left-btn-left2 {
  position: relative;
  height: 30%;
  width: 100%;
}
.left-text {
  position: absolute;
  left: 5%;
  width: 20%;
  top: 10%;
}
.img {
  position: absolute;
  width: 33.3%;
  left: 30%;
}
.right-text {
  position: absolute;
  right: 10%;
  width: 20%;
  top: 10%;
}
.top-left-btn-right {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
}
.top-left-btn-right-top {
  height: 15%;
  width: 100%;
  position: relative;
}
.top-left-btn-right-top1 {
  position: absolute;
  height: 100%;
  width: 40%;
  left: 30%;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.top-left-btn-right-top2 {
  position: absolute;
  height: 100%;
  width: 40%;
  right: 0%;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.top-left-btn-right-top3 {
  position: absolute;
  height: 80%;
  right: 0;
  top: 10%;
  background-color: #f2f2f2;
}
.jump-img {
  width: 80%;
  height: 80%;
  text-align: center;
}
.top-left-btn-right-btn {
  height: 85%;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  margin-left: 1%;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.top-left-btn-right-text {
  text-align: right;
  margin-right: 4%;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  width: 30%;
}

.text-1 {
  width: 29%;
  margin-right: 10%;
}
.text-2 {
  margin-right: 15%;
  width: 28%;
}
.top-left-top-right {
  position: absolute;
  height: 100%;
  width: 20%;
  right: 0;
}
.button {
  font-family: Arial;
  font-style: normal;
  font-size: 18px;
  background-color: #16d585;
  color: #ffffff;
  border-bottom-style: solid;
  border-bottom-color: #797979;
  margin-top: 60%;
  margin-left: 20%;
  height: 15%;
  width: 50%;
}
.top-left-btn {
  height: 48%;
  width: 99%;
  box-shadow: 2px 2px 5px rgb(213, 213, 213);
}
.top-left-btn-top {
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  background-color: #d7d7d7;
  height: 12%;
  width: 100%;
}
.top-left-btn-btn {
  width: 100%;
  height: 88%;
}
.table-1 {
  width: 100%;
  border-radius: 3px;

}

.table-2 {
  width: 100%;
}

.t-right {
  position: absolute;
  height: 100%;
  width: 30%;
  right: 0;
}
.picture-top {
  margin-left: 15px;
  margin-top: 0;
  width: 92%;
  height: 97%;
}
.btn {
  position: relative;
  background-color: #ffffff;
  height: 32%;
  width: 100%;
  margin-left: 10px;
}
.btn-left {
  position: absolute;
  height: 95%;
  left: 0;
  width: 39.5%;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px rgb(213, 213, 213);
}
.btn-left-top {
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  background-color: #d7d7d7;
  width: 100%;
  height: 12%;
}
.btn-left-btn {
  width: 100%;
  height: 88%;
}
.btn-right {
  position: absolute;
  height: 100%;
  right: 0;
  width: 60%;
  background-color: #ffffff;
}
.picture-btn {
  height: 98%;
  width: 99%;
}
</style>
